<script setup lang="ts">
import { reactive } from 'vue';
const props: any = defineProps<{
    ujt: any;
}>();
const { $global } = props.ujt;

const posdrag: any = reactive({
    drag1: { y: 200, x: 100 },
    drag3: { y: 100, x: 200 },
    drag2: { y: 260, x: 260 },
});
function sendmsg() {
    $global.msg.fn({
        type: 'err',
        tit: `err消息`,
    });
    $global.msg.fn({
        type: 'err',
        tit: `err消息22222222222222222222`,
    });
    $global.msg.fn({
        type: 'err',
        tit: `err消息`,
    });
    $global.msg.fn({
        type: 'err',
        tit: `err消息3333333333333333`,
    });
    $global.msg.fn({
        type: 'err',
        tit: `err消息`,
    });
}
function sendmsgok() {
    $global.msg.fn({
        type: 'ok',
        tit: `ok消息666666666666666666`,
    });
    $global.msg.fn({
        type: 'ok',
        tit: `ok消息`,
    });
    $global.msg.fn({
        type: 'ok',
        tit: `ok消息55555555555555555`,
    });
    $global.msg.fn({
        type: 'ok',
        tit: `ok消息`,
    });
    $global.msg.fn({
        type: 'ok',
        tit: `ok消息777777777777777`,
    });
}
function manageList(lualist: string) {
    $global.pop['poplua'].stat = 1;
    $global.pop['poplua'].tit =
        lualist === 'luaprojects' ? '工程列表编辑' : '任务列表编辑';
    $global.pop['poplua'].btns = [
        {
            nm: '保存',
            fn: () => console.log(666.008),
        },
        {
            nm: '取消',
            fn: () => {
                $global.pop['poplua'].stat = 0;
            },
        },
    ];
}
function manageList1(lualist: string) {
    $global.pop['poplua1'].stat = 1;
    $global.pop['poplua1'].tit =
        lualist === 'luaprojects' ? '工程列表编辑' : '任务列表编辑';
    $global.pop['poplua1'].btns = [
        {
            nm: '保存',
            fn: () => console.log(666.008),
        },
        {
            nm: '取消',
            fn: () => {
                $global.pop['poplua1'].stat = 0;
            },
        },
    ];
}
function manageList2(lualist: string) {
    $global.pop['poplua2'].stat = 1;
    $global.pop['poplua2'].zindex = 2;
    $global.pop['poplua2'].tit =
        lualist === 'luaprojects' ? '工程列表编辑222' : '任务列表编辑222';
    $global.pop['poplua2'].btns = [
        {
            nm: '保存',
            fn: () => console.log(666.008),
        },
        {
            nm: '取消',
            fn: () => {
                $global.pop['poplua2'].stat = 0;
            },
        },
    ];
}
</script>

<template>
    <div class="as-estun-index">
        <div
            v-for="(item, key) of posdrag"
            :key="key"
            v-dragzoom="{
                ujt,
                pos: item,
            }"
            :style="{ transform: `translate(${item.x}px, ${item.y}px)` }"
            class="draggable-box"
        >
            拖拽元素{{ key }}（{{ item.x }}, {{ item.y }}）
        </div>
        <h1>{{ $global.sys.zoomwidth }} × {{ $global.sys.zoomheight }} 分辨率展示</h1>
        <p>当前缩放比例: {{ $global.scale }}</p>
        <button @pointerdown.stop="sendmsg()">发射err消息</button>
        <button @pointerdown.stop="sendmsgok()">发射ok消息</button>
        <button @pointerdown.stop="manageList('luaprojects')">管理工程full</button>
        <button @pointerdown.stop="manageList1('luaprojects')">管理工程zoom</button>
        <button @pointerdown.stop="manageList2('luaprojects')">管理工程scale</button>
        <div
            class="as-msg-bak"
            v-dragzoom="{
                ujt,
            }"
        >
            <div v-for="item in $global.msg.bak || []">
                {{ item }}
            </div>
        </div>
        <div style="width: 100%; height: 688px; overflow: auto">
            <span v-for="i in 1000">测试数据{{ i }}；</span>
        </div>
        <div class="as-channel-search">
            <div class="as-channel-search-main">
                <input placeholder="请输入搜索内容" />
                <button>搜索</button>
            </div>
            <div class="as-channel-search-opt">
                <select>
                    <option>搜索</option>
                    <option value="tit">标题</option>
                    <option value="content">详情内容</option>
                </select>
                <select>
                    <option>排序</option>
                    <option value="tit">标题</option>
                    <option value="sn">编码</option>
                </select>
                <select>
                    <option>方式</option>
                    <option value="1">正序</option>
                    <option value="2">倒序</option>
                </select>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
select {
    // transform: scale(0.5);
    // transform-origin: 0 0;
    font-size: calc(1em * 0.5); /* Compensate text size */
}
button {
    height: 38px;
    padding: 0 12px;
    margin-right: 12px;
    background-color: var(--cm8);
    color: var(--cm0);
}
.as-estun-index {
    flex-grow: 1;
    background-color: var(--ch2);
    overflow: auto;
}
.draggable-box {
    position: absolute;
    width: 200px;
    height: 150px;
    background: #2196f3;
    cursor: move;
    will-change: transform;
    user-select: none;
}
.as-msg-bak {
    cursor: move;
    position: absolute;
    user-select: none;
    will-change: transform;
    width: 200px;
    height: 180px;
    overflow: auto;
    background-color: aliceblue;
}
</style>
